<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript"></script>
</head>
<body>
    <!-- 
        computed和watch之间的区别:
            1.computed能完成的功能,watch都可以完成。
            2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
        两个重要的小原则:
            1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
            2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm 或组件实例对象。


     -->
    <div id="box">
        姓：<input type="text" placeholder="请输入你的姓" v-model="firstName"><br>
        名：<input type="text" placeholder="请输入你的名" v-model="lastName"><br>
        <p>你的姓名：{{fullName}}</p>
    </div>
    

    <script>
        Vue.config.productionTip = false;  //阻止vue在启动时生成生产提示
        //创建实例
        let vm = new Vue({
            el:"#box",
            data:{
                firstName:"苏",
                lastName:"凉",
                fullName:"苏-凉"
            },
            //使用computed实现
            // computed:{
            //     // 简写：只考虑读取，不考虑修改
            //     fullName(){
            //         // console.log("值被读取！");
            //         return this.firstName + '-' +this.lastName;
            //     },
            //使用watch实现
            watch:{
                firstName:{
                    handler(newValue){
                        setTimeout(()=>{
                            this.fullName = newValue + '-' + this.lastName;
                        },1000)
                        
                    }
                },
                lastName:{
                    handler(newValue){
                        this.fullName = this.firstName + '-' + newValue; 
                    }
                }
            
            }
        })
        
       
    </script>
</body>
</html>